<%@ page contentType="text/html; charset=utf-8" %>
<%
String  url			= (String) request.getServerName().trim().replace("http://", "");
%>
<jsp:include page="/mobile/common/head.jsp"></jsp:include>

<script>
 
 function on_Load()
 {
  
	 try{
		 this.user_id   = document.getElementById("user_id");
	 
		 this.pwd_text   = document.getElementById("pwd_text");
		  
		 this.id_save   = document.getElementById("id_save");
		 this.auto_login   = document.getElementById("auto_login");
		  
		 //window.addEventListener("storage", on_Storage, false);
		  
		 this.showAll();
	 } catch (e) {
		  
	 }
 }
 
 function on_Storage(event)
 {
  alert( "키 :"+event.key+
    " 이전 값:"+event.oldValue+
    " 지금 값:"+event.newValue);
  showAll();
 }
 
 
 function showAll()
 {
  // 목록을 클리어  
  //루프를 이용하여 스토리지 내용을 확인.
  
  try{
	  var frm = document.mainform;
	  
	  for(var i=0;i<localStorage.length;i++)
	  {
	   var k=localStorage.key(i);
	   	//alert("키:"+k +" 값:"+localStorage[k]);
	   	if(k == "id_save"){
	   		if(localStorage[k]== "Y"){
	   			frm.id_save.checked = true;  
	   			
	   			$('#id_save').attr('checked', true);         // 눈에는 안보이지만 체크 처리를 합니다.
	   			$('#id_save_label').addClass('ui-btn-active');     // 라벨에 활성화 색을 입힙니다.
	   			$('#id_save_label span span.ui-icon').removeClass('ui-icon-checkbox-off').addClass('ui-icon-checkbox-on');
	   			// 체크 표시를 해줍니다.
	
	   		}else{
	   			frm.id_save.checked = false; 
	   		}
	   	}
	   	
	   	if(k == "user_id"){
	   		frm.user_id.value = localStorage[k];
		}
			
		if(k == "pwd_text"){
			frm.pwd_text.value = localStorage[k];
		}
	   	
	   	if(k == "auto_login"){
	   		if(localStorage[k]== "Y"){
	   			
	   			frm.auto_login.checked = true; 
	   			
	   			$('#auto_login').attr('checked', true);         // 눈에는 안보이지만 체크 처리를 합니다.
	   			$('#auto_login_label').addClass('ui-btn-active');     // 라벨에 활성화 색을 입힙니다.
	   			$('#auto_login_label span span.ui-icon').removeClass('ui-icon-checkbox-off').addClass('ui-icon-checkbox-on');
	   			// 체크 표시를 해줍니다.
	   			
	   			checkForm_auto();
	   		}else{
	   			frm.auto_login.checked = false; 
	   		}
	   	}
	  }  
  }catch(e){
	  
  }
 }
 
 // 스토리지에 값을 저장.
 function save()
 {
	 try{
		var frm = document.mainform;
		if(frm.id_save.checked == true){
		  localStorage["user_id"]=frm.user_id.value;	  
		  localStorage["pwd_text"]=frm.pwd_text.value;
		  localStorage["id_save"]=frm.id_save.value;
		}else{
		  delete localStorage["user_id"];
		  delete localStorage["pwd_text"];
		  delete localStorage["id_save"];
		}
	  
		if(frm.auto_login.checked == true){
	   		localStorage["auto_login"]=frm.auto_login.value;
		}else{
			delete localStorage["auto_login"];
		}
	 } catch (e) {
			
	 }
  
 }
 
 /*
 // 스토리지로부터 값을 삭제.
 function remove()
 {
  delete localStorage[key.value];
  
 }
 */
  
</script>

<script>
function checkForm() {
	try {
		if ($.trim($('#user_id').val()) == "" ||
			$.trim($('#pwd_text').val()) == ""
			) {
				alert("Please enter all fields");
				return false;
			}else{
				save();
				
				document.mainform.action="index_login.jsp";
				document.mainform.submit();
			}
	} catch (e) {
		alert(e);
		return false;
	}
	
}

function checkForm_auto() {
	try {
		var frm = document.mainform;
		for(var i=0;i<localStorage.length;i++)
		  {
		   var k=localStorage.key(i);
		   
		   if(k == "user_id"){
			   frm.user_id.value = localStorage[k];
			}
				
			if(k == "pwd_text"){
			   frm.pwd_text.value = localStorage[k];
			}
		  }
		
		if ($.trim($('#user_id').val()) == "" ||	$.trim($('#pwd_text').val()) == "") {					
			return false;
		}else{
			document.mainform.action="index_login.jsp";
			document.mainform.submit();
		}
	
	} catch (e) {
		alert(e);
		return false;
	}
	
}
</script>

 

<body onLoad="on_Load()">
	
    <div data-role="page" id="page_main"  >
    
        <div data-role="header"  data-backbtn="false" >
		<h1>로그인</h1>
        </div>
        <div data-role="content"   data-theme="c">
        <form name="mainform" action="javascript:checkForm()" method="post" >
        	 <div data-role="fieldcontain">
              		<label for="user_id">아이디</label>
              		<input type="text" name="user_id" id="user_id" value=""  placeholder="아이디입력하세요."/>
                   
                    <label for="pwd_text">비밀번호</label>
              		<input type="password" name="pwd_text" id="pwd_text" placeholder="password(4~8자)"  />
              		<h3 id="notification"></h3>
              		
              		
				    <input type="checkbox" name="id_save" id="id_save" value="Y" />
				    <label for="id_save" id="id_save_label">ID 및 암호저장</label>
				
				    <input type="checkbox" name="auto_login" id="auto_login" value="Y"/>
				    <label for="auto_login" id="auto_login_label">자동으로 로그인</label>				
				     
				    
	     
                    <button data-theme="b" id="submit_button" type="button" onclick="checkForm()" >확인</button>
             </div> 
             
        </form>                  
      	</div>
    
    
    	<div data-role="footer" data-theme="a" data-position="fixed">
            <h1>교육 담당자 시스템.</h1>
        </div>
        
    </div>    
</body>
</html>
